<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-template-container`]" v-if="!showVideo">
      <view class="card">
        <view class="title">房间信息</view>
        <view class="room-info">
          <view class="project-name ccc">{{ formData.project_name }}</view>
          <view class="room-name">{{ formData.room_name }}</view>
          <view class="room-tag-wrap">
            <view v-if="formData.room_type_name" class="room-tag">{{ formData.room_type_name }}</view>
            <view v-if="formData.area" class="room-tag">{{ formData.area }}</view>
          </view>
          <view class="reserve-amount">
            <span class="price-primary">{{ formData.monthly_rent }}</span> 元/月
          </view>
        </view>
      </view>
      <view class="card" v-if="companyInfo?.enterprise_name">
        <view class="title">企业员工专属优惠</view>
        <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="companyInfo.enterprise_name">
          <template v-slot:prefix>
            <uv-text text="认证企业" size="13" margin="10rpx 0" color="#999999"></uv-text>
          </template>
        </uv-input>
        <!-- <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="companyInfo.discount">
              <template v-slot:prefix>
                <uv-text text="租金折扣" size="13" margin="10rpx 0" color="#999999"></uv-text>
              </template>
            </uv-input> -->
        <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="companyInfo.expiration_date">
          <template v-slot:prefix>
            <uv-text text="有效期" size="13" margin="10rpx 0" color="#999999"></uv-text>
          </template>
        </uv-input>
        <uv-input border="none" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="companyInfo.equity_content">
          <template v-slot:prefix>
            <uv-text text="企业权益" size="13" margin="10rpx 0" color="#999999"></uv-text>
          </template>
        </uv-input>
        <view class="small-tips">*实际优惠以门店最终确认为主</view>
      </view>
      <view class="card" v-if="agreement.list.length > 0">
        <view class="title">{{ agreement.name }}</view>
        <uv-input v-for="(items, indexs) in agreement.list" :key="indexs" border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="items.des">
          <template v-slot:prefix>
            <uv-text :text="items.title" size="13" margin="10rpx 0" color="#999999"></uv-text>
          </template>
        </uv-input>
      </view>
      <view class="card">
        <view class="title">合同租期</view>
        <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="formData.begin_date">
          <template v-slot:prefix>
            <uv-text text="起租日期" size="13" margin="10rpx 0" color="#999999"></uv-text>
          </template>
        </uv-input>
        <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="formData.end_date">
          <template v-slot:prefix>
            <uv-text text="截至日期" size="13" margin="10rpx 0" color="#999999"></uv-text>
          </template>
        </uv-input>
      </view>
      <view class="card">
        <view class="title">其他费项</view>
        <uv-input v-for="(item, index) in feeitem_array" :key="index" border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="item.standard">
          <template v-slot:prefix>
            <uv-text :text="item.name" size="13" margin="10rpx 0" color="#999999"></uv-text>
          </template>
        </uv-input>
      </view>
      <view class="card">
        <view class="title">签约用户信息</view>
        <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="customer.name">
          <template v-slot:prefix>
            <uv-text text="租户姓名" size="13" margin="10rpx 0" color="#999999"></uv-text>
          </template>
        </uv-input>
        <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="customer.card_num">
          <template v-slot:prefix>
            <uv-text :text="customer.card_type" size="13" margin="10rpx 0" color="#999999"></uv-text>
          </template>
        </uv-input>
        <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="customer.phone">
          <template v-slot:prefix>
            <uv-text text="联系电话" size="13" margin="10rpx 0" color="#999999"></uv-text>
          </template>
        </uv-input>
        <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="customer.address">
          <template v-slot:prefix>
            <uv-text text="通讯地址" size="13" margin="10rpx 0" color="#999999"></uv-text>
          </template>
        </uv-input>
        <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="customer.occupation">
          <template v-slot:prefix>
            <uv-text text="租客身份" size="13" margin="10rpx 0" color="#999999"></uv-text>
          </template>
        </uv-input>
        <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="customer.company">
          <template v-slot:prefix>
            <uv-text text="所属公司" size="13" margin="10rpx 0" color="#999999"></uv-text>
          </template>
        </uv-input>
        <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="customer.e_mail">
          <template v-slot:prefix>
            <uv-text text="邮箱" size="13" margin="10rpx 0" color="#999999"></uv-text>
          </template>
        </uv-input>
      </view>
      <view class="card">
        <view class="title">紧急联系人信息</view>
        <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="customer.emergency_name">
          <template v-slot:prefix>
            <uv-text text="紧急联系人姓名" size="13" margin="10rpx 0" color="#999999"></uv-text>
          </template>
        </uv-input>
        <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="customer.emergency_tel">
          <template v-slot:prefix>
            <uv-text text="紧急联系人手机号" size="13" margin="10rpx 0" color="#999999"></uv-text>
          </template>
        </uv-input>
      </view>
      <view class="fixed-wrap">
        <view class="fixed-button">
          <uv-button type="primary" text="放弃签字" :plain="true" customStyle="margin-top: 10px" @click="giveUp"></uv-button>
          <uv-button v-if="formData.status !== 7" type="primary" text="下一步" customStyle="margin-top: 10px" @click="submit"></uv-button>
          <uv-button v-if="formData.status === 7" type="primary" text="去签字" customStyle="margin-top: 10px" @click="sign"></uv-button>
        </view>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
    </view>
    <popupRecognition ref="ref-face" />
    <view :class="[`${prefixCls}-template-container`]" v-if="showVideo">
      <view class="video-player">
        <video id="myVideo" :src="videoSrc" :controls="false" :enable-progress-gesture="false" @ended="videoEnd" width="100%" height="100%" object-fit="cover"></video>
        <view class="fixed-button">
          <uv-button type="primary" text="上一步" customStyle="margin-top: 10px" @click="lastPage"></uv-button>
          <uv-button :disabled="!videoPlayEnd && isNeedSign" v-if="formData.status !== 7" type="primary" text="下一步" customStyle="margin-top: 10px" @click="submit"></uv-button>
          <uv-button :disabled="!videoPlayEnd && isNeedSign" v-if="formData.status === 7" type="primary" text="去签字" customStyle="margin-top: 10px" @click="sign"></uv-button>
        </view>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import popupRecognition from '@/pages/components/popupRecognition.vue'
import { mapActions, mapGetters } from 'vuex'
import { getFireVideo, leaseInfo, onlineOnline } from './api'
export default {
  name: 'componentName',
  components: {
    popupRecognition,
  },
  mixins: [],
  props: {},
  data() {
    return {
      formData: {
        safeAreaInsets: 0,
        project_name: '',
        project_id: '',
        room_name: '',
        room_id: '',
        room_type_name: '',
        area: '',
        monthly_rent: '',
        begin_date: '',
        end_date: '',
        status: '',
      },
      agreement: {
        list: [],
        name: '',
      },
      feeitem_array: [],
      customer: {},
      online_sign_info: {
        sign_platform: '',
        agreenment_page_url: '',
        sign_platform_name: '',
      },
      showVideo: false,
      videoSrc: '', // 替换为你的视频文件路径
      videoPlayEnd: false,
      isNeedSign: false,
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['userInfo']),
    companyInfo() {
      let info = {}
      if (this.userInfo?.company_info) {
        info = {
          ...this.userInfo.company_info,
          discount: this.userInfo.company_info.discount ? this.userInfo.company_info.discount + '%' : '',
          expiration_date: this.userInfo.company_info.begin_date ? this.userInfo.company_info.begin_date + ' 至 ' + this.userInfo.company_info.end_date : '',
        }
      }
      return info
    },
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.formData.safeAreaInsets = this.$Platform.device.safeAreaInsets.bottom || 0
    this.getData()
    this.getFireVideo()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    videoEnd() {
      this.videoPlayEnd = true
    },
    lastPage() {
      this.showVideo = false
    },
    async getFireVideo() {
      try {
        const { data } = await getFireVideo()
        this.videoSrc = data.url
        this.isNeedSign = data.is_force == 1 ? true : false
      } catch (err) {}
    },
    async getData() {
      const { id } = this.$Route.query
      const { data } = await leaseInfo({ id })
      const { room, agreement, feeitem_array, customer, online_sign_info, status } = data
      for (let key in this.formData) {
        if (key != 'safeAreaInsets') {
          if (key == 'end_date' || key == 'begin_date') {
            this.formData[key] = room[key] ? room[key].split(' ')[0] : ''
          } else {
            this.formData[key] = room[key]
          }
        }
      }
      // this.formData.status = 7
      this.agreement = agreement
      this.feeitem_array = feeitem_array
      this.customer = customer
      for (let key in this.online_sign_info) {
        this.online_sign_info[key] = online_sign_info[key]
      }
    },
    // 放弃签字
    async giveUp() {
      const { id } = this.$Route.query
      const { errcode } = await onlineOnline({ id })
      if (errcode === 0) {
        this.$ROUTE.go('/pages/subpackage/contract/index')
      }
    },
    sign() {
      if (this.videoSrc && !this.showVideo) {
        this.showVideo = true
        return
      }
      this.$refs['ref-face'].handleOpen({ scene: 'bill' })
    },
    // 下一步
    submit() {
      if (this.videoSrc && !this.showVideo) {
        this.showVideo = true

        return
      }
      const { id } = this.$Route.query
      const page_url = this.online_sign_info.agreenment_page_url
      const name = this.customer.name
      this.$ROUTE.go('/pages/subpackage/bill/index', { page_url, id })
    },
  },
}
</script>

<style lang="scss" scoped>
.video-player {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  .fixed-button {
    display: flex;
    ::v-deep .uv-button-wrapper {
      flex: 1;
      margin: 0 15px;
    }
  }
}
video {
  width: 100%;
  display: block;
}

.controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

button {
  padding: 5px 10px;
  cursor: pointer;
}

slider {
  width: 50%;
}
.#{prefixCls('template-container')} {
  position: relative;
  background: #f5f5f5;
  box-sizing: border-box;
  padding-bottom: 100px;
  .price-primary {
    color: $uv-price-primary;
  }
  .fixed-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    background: linear-gradient(to bottom, white, #f5f5f5);
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    border-top: 1px solid #f1f1f1;
    .fixed-button {
      display: flex;
      ::v-deep .uv-button-wrapper {
        flex: 1;
        margin: 0 15px;
      }
    }
  }
  .card {
    margin: 15px 10px;
    background: white;
    padding: 15px 10px;
    border-radius: 8px;
    box-sizing: border-box;
    .title {
      position: relative;
      padding-left: 10px;
      margin-top: 0;
      margin-bottom: 10px;
      &::before {
        width: 3px;
        height: 100%;
        position: absolute;
        background: $uv-primary;
        left: 0;
        content: ' ';
      }
    }
    .room-info {
      position: relative;
      .room-name {
        font-size: 28rpx;
        margin-top: 30rpx;
        margin-bottom: 20rpx;
        color: #999999;
      }
      .room-tag-wrap {
        display: flex;
        flex-wrap: wrap;
        .room-tag {
          font-size: 24rpx;
          margin-right: 5px;
          margin-bottom: 5px;
          // background: $uv-primary;
          border-color: #999999;
          color: #999999;
          border: 1px solid;
          border-radius: 5px;
          padding: 3px 8px;
          // color: white;
        }
      }
      .reserve-amount {
        font-size: 12px;
        position: absolute;
        right: 10px;
        bottom: 25px;
        .price-primary {
          margin-right: 10px;
          font-size: 22px;
        }
      }
    }
    ::v-deep .uv-input {
      padding-left: 0 !important;
      &:last-child {
        border-color: white !important;
      }
    }
    .small-tips {
      font-size: 24rpx;
      color: #999999;
      padding-top: 20rpx;
    }
  }
}
</style>
